<!--
 * @Description: 个人学习记录
 * @Autor: dyx
 * @Date: 2023-02-22 15:49:00
 * @LastEditTime: 2023-02-25 18:11:54
-->
<template>
  <div>
    <el-dialog
      title="个人学习记录"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="JADP-dialog JADP-dialog_center"
      lock-scroll
      width="75%"
      v-loading="loading"
      append-to-body
    > 
      <h3>基本信息</h3>
      <div class="infoinfo">
        <div>班级：{{ dataForm.classname }}</div>
        <div>姓名：{{ dataForm.studentname }}</div>
        <div>总学习时长：{{ dataForm.totalduration | timeFilter }}</div>
      </div>
      <h3>学习记录</h3>
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="课程名称">
              <el-input
                v-model="query.curriculumname"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课件名称">
              <el-input
                v-model="query.coursewarename"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getRecordList()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <JADP-table v-loading="listLoading" :data="list" height="600">
        <el-table-column prop="curriculumname" label="课程名称" align="left" />
        <el-table-column prop="coursewarename" label="课件名称" align="left" />
        <el-table-column prop="starttime" label="开始时间" align="left" />
        <el-table-column prop="endtime" label="结束时间" align="left" />
        <el-table-column prop="learnduration" label="学习时长" align="left">
          <template #default="{row}">
            <span>{{ row.learnduration | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="{ row }">
            <el-button type="text" @click="cameraMonitoring(row.id)"
              >摄像头监控
            </el-button>
            <el-button type="text" @click="faceRecognitionMonitoring(row.id)"
              >人脸识别监控
            </el-button>
            <el-button type="text" @click="captchaMonitoring(row.id)"
              >验证码监控
            </el-button>
          </template>
        </el-table-column>
      </JADP-table>
      <pagination
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        @pagination="getRecordList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <CameraMonitoring v-if="recordFormVueVisible" ref="recordFormVue" />
    <VerificationCode v-if="VerificationCodeVisible" ref="VerificationCode" />
    <FaceRecognitionMonitoring v-if="faceVisible" ref="faceRecognition" />
  </div>
</template>
<script>
import request from "@/utils/request";
import CameraMonitoring from "./cameraMonitoring.vue";
import VerificationCode from "./verificationCode.vue";
import FaceRecognitionMonitoring from "./faceRecognitionMonitoring.vue";
export default {
  name: "",
  components: {
    CameraMonitoring,
    VerificationCode,
    FaceRecognitionMonitoring
  },
  data() {
    return {
      visible: false,
      recordFormVueVisible: false,
      VerificationCodeVisible: false,
      faceVisible: false,
      loading: false,
      dataForm: {},
      list: [],
      listLoading: false,
      total: 0,
      query: {
        curriculumname: "",
        coursewarename: ""
      },
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        sort: "desc",
        sidx: ""
      }
    };
  },
  methods: {
    init(id) {
      this.visible = true;
      this.loading = true;
      this.dataForm.id = id;
      this.getRecordList();
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_learn_center/${id}`,
        method: "get"
      }).then(res => {
        this.loading = false;
        this.dataForm = res.data;
      });
    },
    getRecordList() {
      request({
        url: "/api/xy_kj_process_records/Xy_kj_process_records",
        method: "get",
        data: {
          ...this.query,
          ...this.listQuery,
          learncenterid: this.dataForm.id,
          organizeId:this.$store.getters.organizeId
        }
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    reset() {
      this.query = {
        curriculumname: "",
        coursewarename: ""
      };
      this.getRecordList();
    },
    cameraMonitoring(id) {
      this.recordFormVueVisible = true;
      this.$nextTick(item => {
        this.$refs.recordFormVue.init(id);
      });
    },

    faceRecognitionMonitoring(id) {
      this.faceVisible = true;
      this.$nextTick(item => {
        this.$refs.faceRecognition.init(id);
      });
    },
    captchaMonitoring(id) {
      this.VerificationCodeVisible = true;
      this.$nextTick(item => {
        this.$refs.VerificationCode.init(id);
      });
    }
  },
  filters: {
    timeFilter(value) {
      if (!value) return "";
      let h = parseInt(value / 3600);
      let m = parseInt((value % 3600) / 60);
      let s = parseInt((value % 3600) % 60);
      return `${h}小时${m}分钟${s}秒`;
    }
  }
};
</script>
<style scoped lang="scss">
.JADP-dialog_center {
  h3 {
    font-size: 18px;
    margin: 10px 0;
  }
  .infoinfo {
    display: flex;
    padding: 10px 0;
    & > div {
      width: 50%;
      margin-left: 10px;
    }
    border-bottom: 1px solid #ccc;
  }
}
</style>
